<template>
  <div>
    <!-- 搜索 -->
    <van-search
      shape="round"
      background="#4fc08d"
      placeholder="请输入搜索关键词"
      @focus="toSearch"
    />
    <!-- 轮播 -->
    <Banner :images="images" />

    <!-- 列表 -->
    <List :list="list"/>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import Banner from "@/components/Banner";
import request from "@/utils/api";
import { ref, onMounted } from "vue";
import List from '@/components/List'
export default {
  name: "Index",
  setup() {
    // 路由
    const router = useRouter();
    // 轮播数据
    const images = [
      require("@/assets/images/1.jpg"),
      require("@/assets/images/2.jpg"),
      require("@/assets/images/3.jpg"),
      require("@/assets/images/4.jpg")
    ];
    // 列表数据
    const list = ref([]);

    // 方法
    // 跳转搜索
    const toSearch = () => {
      router.push({ name: "Search" });
    };
    // 获取数据
    const getList = async () => {
      const resp = await request.get("/api/list");
      // 修改数据
      list.value = resp.data.data;
    };
  
    // 生命周期
    onMounted(() => {
      getList();
    });
    // 返回
    return {
      toSearch,
      images,
      list
    };
  },
  components: {
    Banner,
    List
  }
};
</script>

